<template>
    <div class="top-image fullscreen-top"></div>
<div class="list">
  <div class="item">
    <span class="item-text">新闻中心</span>
    <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
  </div>
</div>
<TitleBox title="党建学习" subtitle="SUPPORT AND RESOURCES" />

  <div class="news-detail-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '@/views/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/news/partyBuilding' }">党建学习</el-breadcrumb-item>
      <el-breadcrumb-item>{{ newsDetail.title }}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-icon class="is-loading">
        <Loading />
      </el-icon>
      <span>加载中...</span>
    </div>

    <!-- 新闻详情 -->
    <div v-else-if="newsDetail.id" class="news-content">
      <!-- 标题区域 -->
      <div class="news-header">
        <h1 class="news-title">{{ newsDetail.title }}</h1>
        <div class="news-meta">
          <span class="meta-item">
            <el-icon><Calendar /></el-icon>
            {{ formatDate(newsDetail.publishTime) }}
          </span>
          <span class="meta-item">
            <el-icon><View /></el-icon>
            {{ newsDetail.views || 0 }} 次浏览
          </span>
          <span class="meta-item">
            <el-icon><User /></el-icon>
            {{ newsDetail.author || '管理员' }}
          </span>
        </div>
        <el-tag v-if="newsDetail.category" type="primary" size="small">
          {{ newsDetail.category }}
        </el-tag>
      </div>

      <!-- 封面图片 -->
      <div v-if="newsDetail.coverImage" class="news-cover">
        <el-image 
          :src="newsDetail.coverImage" 
          fit="cover"
          :preview-src-list="[newsDetail.coverImage]"
        >
          <template #error>
            <div class="image-error">
              <el-icon><Picture /></el-icon>
              <span>图片加载失败</span>
            </div>
          </template>
        </el-image>
      </div>

      <!-- 新闻正文 -->
      <div class="news-body" v-html="newsDetail.content"></div>

      <!-- 分享按钮 -->
      <div class="news-actions">
        <el-button @click="shareNews" type="primary" :icon="Share">
          分享
        </el-button>
        <el-button @click="printNews" :icon="Printer">
          打印
        </el-button>
      </div>

      <!-- 上一篇/下一篇 -->
      <div class="news-navigation">
        <div 
          v-if="prevNews" 
          class="nav-item prev-news"
          @click="goToNews(prevNews.id)"
        >
          <span class="nav-label">上一篇：</span>
          <span class="nav-title">{{ prevNews.title }}</span>
        </div>
        <div 
          v-if="nextNews" 
          class="nav-item next-news"
          @click="goToNews(nextNews.id)"
        >
          <span class="nav-label">下一篇：</span>
          <span class="nav-title">{{ nextNews.title }}</span>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <el-empty v-else description="新闻不存在或已被删除">
      <el-button type="primary" @click="$router.push('/news')">
        返回新闻列表
      </el-button>
    </el-empty>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getNews } from '@/api/newsSys/news.js'
import TitleBox from "@/components/common/TitleBox.vue"
import { 
  Calendar, 
  View, 
  User, 
  Picture, 
  Share, 
  Printer,
  Loading 
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(true)
const newsDetail = ref({})
const prevNews = ref(null)
const nextNews = ref(null)

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 获取新闻详情
const fetchNewsDetail = async () => {
  loading.value = true
  try {
    const newsId = route.params.id
    
    // 模拟 API 请求
    // 实际使用时替换为：
    const response = await getNews(newsId)
    console.log('完整 response:', response)
    // await new Promise(resolve => setTimeout(resolve, 500))
    newsDetail.value = response.data
    // 模拟数据
    
    // 获取上一篇/下一篇
    const responsePrev = await getNews(newsId-1)
    prevNews.value = responsePrev.data

    const responseNext = await getNews(newsId+1)
    nextNews.value = responseNext.data
    
  } catch (error) {
    console.error('获取新闻详情失败：', error)
    ElMessage.error('加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 跳转到指定新闻
const goToNews = (id) => {
  router.push(`/news/${id}`)
  // 重新加载数据
  fetchNewsDetail()
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 分享新闻
const shareNews = () => {
  const url = window.location.href
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

// 打印新闻
const printNews = () => {
  window.print()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchNewsDetail()
})
</script>

<style scoped>
.top-image {
  width: 100%;
  height: 260px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-position: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 12px rgba(22, 93, 255, 0.2);
}

.list {
  display: flex;
  align-items: center;
  position: relative; /* 确保 ::after 的绝对定位相对于它 */
  z-index: 0; /* 默认最底层 */
}

.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px; /* 可根据需要调整对齐方式 */
  width: 100%;
  height: 90px; /* 背景条高度，可调整 */
  background-color: #eae4e4;
  z-index: 0; /* 背景在最底层 */
}

.list .item {
  position: relative; /* 保持原来的布局 */
  display: inline-block;
  margin-top: -30px;
  z-index: 1; /* 图片和文字覆盖灰色背景 */
}

.list .item-icon {
  display: block;
  position: relative;
  z-index: 1; /* 图片在灰色背景上 */
}

.list .item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2; /* 文字在最上层 */
}

.news-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}

.breadcrumb {
  margin-top: 20px;
  margin-bottom: 20px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  color: #909399;
  font-size: 16px;
}

.loading-container .el-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.news-content {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* 标题区域 */
.news-header {
  padding: 30px 0;
  border-bottom: 1px solid #ebeef5;
}

.news-title {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 20px;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
  color: #909399;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-item .el-icon {
  font-size: 16px;
}

/* 封面图片 */
.news-cover {
  margin: 30px 0;
  border-radius: 8px;
  overflow: hidden;
}

.news-cover .el-image {
  width: 100%;
  height: 400px;
  cursor: pointer;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.image-error .el-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

/* 正文内容 */
.news-body {
  padding: 30px 0;
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
}

.news-body :deep(h3) {
  font-size: 22px;
  font-weight: bold;
  margin: 25px 0 15px;
  color: #303133;
}

.news-body :deep(p) {
  margin: 15px 0;
  text-align: justify;
}

.news-body :deep(ul),
.news-body :deep(ol) {
  padding-left: 30px;
  margin: 15px 0;
}

.news-body :deep(li) {
  margin: 8px 0;
}

.news-body :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 15px 0;
}

/* 标签 */
.news-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid #ebeef5;
}

.tags-label {
  color: #606266;
  font-weight: bold;
}

.tag-item {
  margin: 0;
}

/* 操作按钮 */
.news-actions {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-top: 1px solid #ebeef5;
}

/* 上下篇导航 */
.news-navigation {
  margin-top: 30px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.nav-item {
  display: flex;
  padding: 15px 0;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-item:hover {
  color: #409eff;
}

.nav-item:not(:last-child) {
  border-bottom: 1px solid #e4e7ed;
}

.nav-label {
  font-weight: bold;
  color: #606266;
  min-width: 80px;
}

.nav-title {
  flex: 1;
  color: #303133;
}

.nav-item:hover .nav-title {
  color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .news-detail-container {
    padding: 15px;
  }

  .news-title {
    font-size: 24px;
  }

  .news-meta {
    flex-direction: column;
    gap: 10px;
  }

  .news-cover .el-image {
    height: 250px;
  }

  .news-body {
    font-size: 15px;
  }

  .news-actions {
    flex-direction: column;
  }

  .news-actions .el-button {
    width: 100%;
  }
}

/* 打印样式 */
@media print {
  .breadcrumb,
  .news-actions,
  .news-navigation {
    display: none;
  }

  .news-detail-container {
    padding: 0;
  }
}

</style>
